<!--创建备份规则-->
<template>
  <div>
    <a-modal :title="$t('Create-backup-rule')" :visible="visible" width='40%' @ok="handleOk" @cancel="handleCancel"
      :cancelText="$t('Cancel')" :okText="$t('Sure')" :maskClosable='false' v-dragModal>
      <a-form :form='form'>
        <a-form-item :label="$t('Username')" v-bind='formlayout' has-feedback>
          <a-input v-decorator="['username', {
            rules: [{ required: true, message: $t('Enter') + $t('Username') },
            { pattern: namePattern, message: $t('Not_enter_special_characters') }]
          }]" :placeholder="$t('Enter') + $t('Username')">
          </a-input>
        </a-form-item>
        <a-form-item :label="$t('Password')" v-bind='formlayout' has-feedback>
          <a-input-password v-decorator="['password', {
            rules: [
              { required: true, message: $t('Enter') + $t('Password') },
              { validator: validateToNextPassword },
              { pattern: /^[^\s\u4e00-\u9fa5]{6,20}$/, message: $t('Password_rule_prompt') }
            ]
          }]" :placeholder="$t('Enter') + $t('Password')">
          </a-input-password>
        </a-form-item>
        <a-form-item :label="$t('Confirm-password')" v-bind='formlayout' has-feedback>
          <a-input-password v-decorator="['confirm_password', {
            rules: [
              { required: true, message: $t('Enter') + $t('Confirm-password') },
              { validator: compareToFirstPassword, trigger: 'blur' },
            ]
          }]" :placeholder="$t('Enter') + $t('Confirm-password')">
          </a-input-password>
        </a-form-item>
        <!--存储位置-->
        <a-form-item :label="$t('Storage-location')" v-bind='formlayout' has-feedback>
          <a-select v-decorator="['location', {
            rules: [{ required: true, message: $t('Choose') + $t('Storage-location') }],
          }]" :placeholder="$t('Choose') + $t('Storage-location')" @change="changeStoreLocation">
            <a-select-option v-for="(item, index) in storeLocations" :value='item.value'
              :key="index">{{ item.title }}</a-select-option>
          </a-select>
        </a-form-item>
        <!--选择节点-->
        <a-form-item :label="$t('Select-node')" v-bind='formlayout' has-feedback v-if="nowStoreLocation == 1">
          <a-select v-decorator="['node', {
            rules: [{ required: true, message: $t('Choose') + $t('Node') },]
          }]" :placeholder="$t('Choose') + $t('Node')">
            <a-select-option value='1'>aaa</a-select-option>
          </a-select>
        </a-form-item>
        <!--服务器地址-->
        <a-form-item :label="$t('Server-address')" v-bind='formlayout' has-feedback v-if="nowStoreLocation == 2">
          <a-input v-decorator="['address', {
            rules: [{ required: true, message: $t('Enter') + $t('Server-address') },
            { pattern: ipReg, message: $t('Enter-ok-ip') }]
          }]" :placeholder="$t('Enter') + $t('Server-address')">
          </a-input>
        </a-form-item>
        <!--scp端口-->
        <a-form-item :label="$t('SCP-port')" v-bind='formlayout' has-feedback v-if="nowStoreLocation == 2">
          <a-input v-decorator="['scp_port', {
            rules: [
              { required: true, message: $t('Enter') + $t('SCP-port') },
              { pattern: scpPortReg, message: $t('Enter-ok-scpPort') }
            ]
          }]" :placeholder="$t('Enter') + $t('SCP-port')">
          </a-input>
        </a-form-item>
        <!--存放目录-->
        <a-form-item :label="$t('Storage-directory')" v-bind='formlayout' has-feedback>
          <a-input v-decorator="['dir', {
            rules: [{ required: true, message: $t('Enter') + $t('Storage-directory') },]
          }]" :placeholder="$t('Enter') + $t('Storage-directory')">
          </a-input>
        </a-form-item>
        <!--定时备份周期-->
        <a-row>
          <a-col :span='16'>
            <a-form-item :label="$t('Scheduled-backup-cycle')"
              v-bind="$store.state.language == 'zh' ? formlayout2 : formlayout3">
              <a-input v-decorator="['size', {
                rules: [
                  { required: true, message: $t('Enter') + $t('Scheduled-backup-cycle') },
                  { pattern: /^\d{1,}.?\d?$/, message: '请输入数字或一位小数' }
                ]
              }]" :placeholder="$t('Enter') + $t('Scheduled-backup-cycle')">
              </a-input>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="">
              <a-select v-decorator="['unit', {
                rules: [{ required: true, message: $t('Enter') + $t('Unit') },]
              }]" :placeholder="$t('Choose') + $t('Unit')">
                <a-select-option v-for='u in cycleUnit ' :key='u.value'>{{ u.title }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>

      </a-form>
    </a-modal>
  </div>
</template>

<script>
export default {
  name: "CreateBackupRule",
  props: ['visible'],
  data() {
    return {
      form: this.$form.createForm(this),
      formlayout: {
        labelCol: { span: 6 },
        wrapperCol: { span: 18 }
      },
      formlayout2: {
        labelCol: { span: 9 },
        wrapperCol: { span: 15 }
      },
      formlayout3: {
        labelCol: { span: 12 },
        wrapperCol: { span: 12 }
      },
      storeLocations: [
        { title: this.$t('Occurrence-node'), value: '0' }, //发生节点
        { title: this.$t('System-special-node'), value: '1' },//系统内部指定节点
        { title: this.$t('Special-log-serve'), value: '2' }, //指定日志服务器
      ],
      cycleUnit: [
        { title: this.$t('Minute'), value: '0' }, //分钟
        { title: this.$t('Hour'), value: '1' }, //小时
        { title: this.$t('Day'), value: '2' }, //天
        { title: this.$t('Week'), value: '3' }, //周
        { title: this.$t('Half-a-month'), value: '4' }, //半月
        { title: this.$t('Month'), value: '5' }, //月
      ],
      nowStoreLocation: '',
      ipReg: /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/,
      scpPortReg: /^([0-9]|[1-9]\d{1,3}|[1-5]\d{4}|6[0-5]{2}[0-3][0-5])$/
    }
  },
  methods: {
    //提交创建规则
    handleOk(e) {
      e.preventDefault();
      this.form.validateFields((err, value) => {
        // if (!err) {

        // }
      })
    },

    // 确认密码
    compareToFirstPassword(rule, value, callback, num) {
      const form = this.form;
      if (value && value !== form.getFieldValue('password')) {
        callback(this.$t('Pwd-error'));
      } else {
        callback();
      }
    },
    validateToNextPassword(rule, value, callback, num) {
      const form = this.form;
      if (value && this.confirmDirty) {
        form.validateFields(['confirm'], { force: true });
      }
      callback();
    },

    //改变存储位置
    changeStoreLocation(value) {
      this.nowStoreLocation = value;
    },

    //关闭创建规则弹窗
    handleCancel() {
      this.$emit('closeDialog', 'add');
      this.nowStoreLocation = '';
    },
  },
}
</script>